import * as  geoJson from "./dazhou.json";
import * as echarts from 'echarts'
export const initMapOpts = (geoCoordData) => {
    var offset = 0.01;
    echarts.registerMap("dazhou", geoJson);

    var geoCoordMap = {};
    geoCoordData.forEach(item => {
        geoCoordMap[item.name] = [item.coordinates.coordinates[0], item.coordinates.coordinates[1]];
    });
    var data = geoCoordData.map(item => {
        return { name: item.name, value: item.views }
    })

    var max = 480000,
        min = 1; // todo
    var maxSize4Pin = 100000,
        minSize4Pin = 1;

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value / 200),
                });
            }
        }
        return res;
    };

    return {
        // 背景黑色
        backgroundColor: "#e7f5ff",

        zoom: 1, // 控制地图缩放级别，可以根据实际情况调整
        title: {
            text: "商家分布大数据",
            subtext: "TOP10，浏览量/200",
            x: "center",
            textStyle: {
                color: "#0077FF",
            },
        },
        // tooltip: {
        //     trigger: "item",
        //     formatter: function (params) {
        //         console.log("Tooltip Params:", params); // 添加这行进行调试
        //         if (!isNaN(params.value[2])) {
        //             return params.name + " : " + params.value[2];
        //         } else {
        //             return params.name + " : N/A";
        //         }
        //     },
        // },
        legend: {
            orient: "vertical",
            y: "bottom",
            x: "right",
            data: ["商家名称"],
            textStyle: {
                color: "#0077FF",
            },
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            left: "left",
            top: "bottom",
            text: ["高", "低"], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'], // 蓝黑
                // color: ['#ffc0cb', '#800080'], // 红紫
                // color: ['#3C3B3F', '#605C3C'], // 黑绿
                // color: ["#0f0c29", "#302b63", "#24243e"], // 黑紫黑
                // color: ['#23074d', '#cc5333'], // 紫红
                // color: ['#00467F', '#A5CC82'], // 蓝绿
                // color: ['#1488CC', '#2B32B2'], // 浅蓝
                color: ['#00467F', '#A5CC82'], // 蓝绿
            },
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: true },
                restore: {},
                saveAsImage: {},
                zoomIn: {},  // 放大按钮
                zoomOut: {}, // 缩小按钮
            }
        },
        geo: {
            show: true,
            map: "dazhou",
            // 背景黑色


            label: {
                show: false,
            },
            roam: true,
            itemStyle: {
                areaColor: "#0077FF",
                borderColor: "#3B5077",
            },
        },
        series: [

            {
                name: "商家名称",
                type: "scatter",//蓝色点状效果
                coordinateSystem: "geo",
                data: convertData(data),
                symbolSize: function (val) {
                    // 限制返回值在合适的范围内
                    var scaledValue = Math.log(val[2]);
                    var maxSize = Math.log(max); // 使用数据的最大值作为最大气泡大小
                    var minSize = Math.log(min); // 使用数据的最小值作为最小气泡大小
                    var sizeRange = maxSize - minSize;

                    // 将缩放后的值映射到 [minSize, maxSize] 范围内
                    var size = (scaledValue - minSize) / sizeRange * (maxSize - minSize) + minSize;

                    return Math.sqrt(size) * 10; // 根据实际情况调整缩放倍率
                },
                label: {
                    formatter: "{b}",
                    position: "right",
                    // 右移的距离
                    offset: [12, 0],
                    show: true,
                },
                itemStyle: {
                    color: "#05C3F9",
                },
            },
            {
                type: "map",
                map: "dazhou",
                geoIndex: 0,
                aspectScale: 0.5, //长宽比
                showLegendSymbol: true, // 存在legend时显示
                label: {
                    show: false,
                    color: "#fff",
                    borderColor: "#3B5077",
                    areaColor: "#2B91B7",
                },
                roam: true,

                animation: false,
                data: convertData(data),
            },
            {
                name: "点",
                type: "scatter",//红色气泡效果
                coordinateSystem: "geo",
                // 气泡上显示的数据是views
                symbol: "pin",
                symbolSize: function (val) {
                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    var b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                },
                label: {
                    fontSize: 10,
                    show: true,
                    // textStyle: {
                    //     color: "#fff",
                    //     fontSize: 10,
                    // },
                    formatter: function (params) {
                        return params.data.value[2].toFixed(2) * 200 / 1000 + "K"; // 根据实际情况调整显示的字段
                    },
                },
                itemStyle: {

                    color: "#F62157", //标志颜色
                    position: "right",
                    show: true,
                },
                zlevel: 6,
                // 数据需要显示data每一个对象中的下标为2的数据
                data: convertData(data),
            },
            {
                name: "Top 10",
                type: "effectScatter",//排名前10效果
                coordinateSystem: "geo",
                data: convertData(
                    data
                        .sort(function (a, b) {
                            return b.value - a.value;
                        })
                        .slice(0, 10)
                ),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: "render",
                rippleEffect: {
                    brushType: "stroke",
                },
                hoverAnimation: true,
                itemStyle: {
                    color: "#05C3F9",
                    shadowBlur: 10,
                    shadowColor: "#05C3F9",
                },
                zlevel: 1,
            },
        ],
    };

}
